Step 1 of 3: Creating an Application with a C1TileListBox Control

In this step, you'll create a WinRT application in Visual Studio using TileListBox for WinRT.

Complete the following steps:

In Visual Studio select File | New | Project.

In the New Project dialog box, expand a language in the left pane, under the language select Windows Store, and in the templates list select Blank App (XAML). Enter a Name and click OK to create your project.

Open MainPage.xaml if it isn't already open, place the cursor between the <Grid> and </Grid> tags, and click once.

Add the following <StackPanel> markup between the <Grid> and </Grid> tags to add a StackPanel containing a TextBlock and ProgressBar:

Markup	Copy Code
<StackPanel x:Name="loading" VerticalAlignment="Center"> <TextBlock Text="Retrieving data from YouTube..." TextAlignment="Center"/> <ProgressBar IsIndeterminate="True" Width="200" Height="4"/> </StackPanel>

Markup

Copy Code

<StackPanel x:Name="loading" VerticalAlignment="Center">
    <TextBlock Text="Retrieving data from YouTube..." TextAlignment="Center"/>
    <ProgressBar IsIndeterminate="True" Width="200" Height="4"/>
 </StackPanel>

The TextBlock and ProgressBar will indicate that the C1TileListBox is loading.

Navigate to the Toolbox and double-click the C1TileListBox icon to add the control to the grid. This will add the reference and XAML namespace automatically.

Edit the <Xaml:C1TileListBox> tag to customize the control:

Markup	Copy Code
<Xaml:C1TileListBox x:Name="tileListBox" ItemsSource="{Binding}" Background="Transparent" Visibility="Collapsed" ItemWidth="800" ItemHeight="600" RefreshWhileScrolling="False"></Xaml:C1TileListBox>

This gives the control a name and customizes the binding, background, visibility, size, and refreshing ability of the control.

Add the following markup between the <Xaml:C1TileListBox> and </Xaml:C1TileListBox> tags:

Markup	Copy Code
<Xaml:C1TileListBox x:Name="tileListBox" ItemsSource="{Binding}" Background="Transparent" ItemWidth="180" ItemHeight="180" Visibility="Collapsed"> <Xaml:C1TileListBox.PreviewItemTemplate> <DataTemplate> <Grid Background="Gray"/> </DataTemplate> </Xaml:C1TileListBox.PreviewItemTemplate> <Xaml:C1TileListBox.ItemTemplate> <DataTemplate> <Grid Background="LightBlue"> <Image Source="{Binding Thumbnail}" Stretch="UniformToFill"/> <TextBlock Text="{Binding Title}" Foreground="White" Margin="4 0 0 4" VerticalAlignment="Bottom"/> </Grid> </DataTemplate> </Xaml:C1TileListBox.ItemTemplate> </Xaml:C1TileListBox>

Markup

Copy Code

<Xaml:C1TileListBox x:Name="tileListBox" ItemsSource="{Binding}"                           Background="Transparent" ItemWidth="180" ItemHeight="180"                           Visibility="Collapsed">
    <Xaml:C1TileListBox.PreviewItemTemplate>
        <DataTemplate>
            <Grid Background="Gray"/>
        </DataTemplate>
            </Xaml:C1TileListBox.PreviewItemTemplate>
            <Xaml:C1TileListBox.ItemTemplate>
        <DataTemplate>
        <Grid Background="LightBlue">
            <Image Source="{Binding Thumbnail}" Stretch="UniformToFill"/>
            <TextBlock Text="{Binding Title}" Foreground="White" Margin="4 0 0 4" VerticalAlignment="Bottom"/>
            </Grid>
        </DataTemplate>
    </Xaml:C1TileListBox.ItemTemplate>
</Xaml:C1TileListBox>

This markup adds data templates for the C1TileListBox control's content. Note that you'll complete binding the control in code.

What You've Accomplished

You've successfully created a WinRT style application containing a C1TileListBox control. In the next step, Step 2 of 3: Adding Data to the TileListBox, you will add the data for C1TileListBox.